<!DOCTYPE html>
<!-- saved from url=(0060)https://www.jq22.com/demo/jquerydaterangepicker202002182203/ -->
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间区间选择器</title>
    <script src="/assets/jquery.min.js"></script>
    <script src="./daterangepicker_files/jquery.min.js"></script>
    <script type="text/javascript" src="./daterangepicker_files/moment.min.js"></script>
    <script type="text/javascript" src="./daterangepicker_files/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./daterangepicker_files/daterangepicker.css">
</head>

<body style="position: relative;top:-50px;">
    <input id="demo" style="display:none;">



    <script>
        $(function () {
            var locale = {
                "format": 'YYYY-MM-DD',
                "separator": " - ",
                "applyLabel": "确定",
                "cancelLabel": "取消",
                "fromLabel": "起始时间",
                "toLabel": "结束时间'",
                "customRangeLabel": "自定义",
                "weekLabel": "W",
                "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
                "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                "firstDay": 1
            };
            $('#demo').daterangepicker({
                maxDate: moment(new Date()),
                'locale': locale,
                ranges: {//--//
                    // '今日': [moment(), moment()],
                    // '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '最近一周': [moment().subtract(6, 'days'), moment()],
                    '最近一个月': [moment().subtract(29, 'days'), moment()],
                    '最近三个月': [moment().subtract(89, 'days'), moment()]////
                    // '本月': [moment().startOf('month'), moment().endOf('month')],
                    // '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month')
                    //     .endOf('month')
                    // ]//
                },
                "alwaysShowCalendars": true,
                "startDate": new Date(),
                "endDate": new Date(),
                "opens": "right",
            }, function (start, end, label) {
                hackerViewModel.hidePoper()
                hackerViewModel.onSelected.apply(this, arguments)
                console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
            }).on('cancel.daterangepicker', function (ev, picker) {
                hackerViewModel.hidePoper()
                // alert(1)
                //  $("#date2").val("请选择日期范围");
                //  $("#startTime").val("");
                //  $("#endTime").val("");
            })
        })
        hackerViewModel.exec(function (HK) {
            return {
                showCalender() {
                    document.querySelector('#demo').click()
                }
            }
            // this.registerMethod('showCalender', () => {
            //     document.querySelector('#demo').click()
            // })
        })
    </script>
    <style>
        html,
        body {
            width: 690px;
            margin: 0 auto;
        }

        input {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .btn-default {
            background-color: #fff;
            border: 1px solid #828080;
            border-radius: 3px;
            cursor: pointer;
        }

        .btn-primary {
            /* background-color: hsl(233, 96%, 48%); */
            background-color: #384ad7;
            border: 1px solid hsl(233, 96%, 48%);
            border-radius: 3px;
            color: #fff;
            cursor: pointer;
        }

        .btn-primary:hover {
            background-color: #0420fb;
        }
    </style>

</body>

</html>